<template>
  <scroll-view :scroll-y="scroll"
    :style="`width: 100%;height:${scrollHeight}px;box-sizing: border-box;padding-bottom:${paddingBottom}rpx;`"
    :scroll-with-animation="true" :class="'my-scroll-view-box ' + curClass" :id="myScrollViewUUid"
    :refresher-triggered="refresherLoading" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh"
    @scroll="onScroll" :refresher-threshold="100" refresher-default-style="black" refresher-background="#f6f9ff"
    :refresher-enabled="refresherRnabled">
    <slot></slot>
  </scroll-view>
</template>

<script>
import { onMounted, ref, watch } from "vue";
export default {
  components: {},
  props: {
    curClass: {
      type: String,
      default: "",
    },
    change: [Object, Boolean, String, Array],
    //组件底部padding
    paddingBottom: {
      type: Number,
      default: 0,
    },
    //是否开启滚动
    scroll: {
      type: Boolean,
      default: true,
    },
    //是否开启下拉刷新
    refresherRnabled: {
      type: Boolean,
      default: false,
    },
    //下来刷新状态
    refresherLoading: {
      type: Boolean,
      default: false,
    },
    //是否加载中...暂时没有实现
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data: {

  },
  onMounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#' + myScrollViewUUid.value).boundingClientRect(data => {
    }).exec();
  },
  emits: ["onTolower", "onRefresh"],
  setup(props, { emit }) {
    const myScrollViewUUid = ref(getRanLetter(12));
    const _height = ref(0);

    /**生成随机字母 */
    function getRanLetter(len = 4) {
      var result = [];
      for (var i = 0; i < len; i++) {
        var ranNum = Math.ceil(Math.random() * 25); //生成一个0到25的数字
        //大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;然后调用String.fromCharCode()传入ASCII值返回相应的字符并push进数组里
        result.push(String.fromCharCode(65 + ranNum));
      }
      return result.join('');
    }

    onMounted(() => {
      setTimeout(() => {
        getHeight();
      });
    });


    /**
     * 获取元素的高度和距离顶部的距离
     * @param id 
     */
    function getDomInfo() {
      return new Promise((resolve, reject) => {
        setTimeout(async () => {
          // const query = uni.createSelectorQuery();
          // query.select('#' + myScrollViewUUid.value).boundingClientRect(data => {
          // }).exec();
        }, 30);
      })
    }
    function getHeight() {
      const pageHeight = uni.getSystemInfoSync().windowHeight;
      // _height.value = pageHeight - res.top;
      getDomInfo()
    }
    watch(() => props.change, getHeight);

    /**上拉触底 */
    function onScrolltolower() {
      if (props.refresherLoading || props.loading) return;
      emit("onTolower");
    }

    /**下拉刷新 */
    function onRefresherrefresh() {
      if (props.refresherLoading) return;
      emit("onRefresh");
    }

    return {
      myScrollViewUUid,
      scrollHeight: _height,
      onScrolltolower,
      onRefresherrefresh,
    };
  },
};
</script>

<style lang="less">
@import "./index.less";
</style>
